<!-- AboutView -->
<template>
  <div class='aboutview'>
    
    <input v-model="score"></input>
    <div>
      <div v-if="score >= 90">优秀</div>
      <div v-else-if="score > 80">良好</div>
      <div v-else-if="score > 60">及格</div>
      <div v-else>不及格</div>
    </div>
    <div>
        <span v-if="sex=='男'">男</span>
        <span v-else-if="sex=='女'">女</span>
        <span v-else>保密</span>
    </div>
    <button @click="changeFlag()">改显示隐藏</button>
    <div class="span1" v-show="flag">隐藏显示-show</div>
    <div class="span1" v-if="flag">隐藏显示-if</div>
    <li v-for="item, index in items" :key="index">
      {{item}} ---------- {{ index}}
    </li>
    <SonView :title="title" :fun="show" @sonData="getSonData"></SonView>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import SonView from '@/views/SonView/SonView.vue'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    SonView
  },
  name: 'AboutView', // ComponentName和文件名保持一致
  // 这里存放数据
  data () {
    return {
      score:0,
      sex:'男',
      flag:true,
      items: ["张三", "李四", "王五"],
      title:'hahaha'
    };
  },
  computed: {}, // 监听属性 类似于data概念
  watch: {}, // 监控data中的数据变化
  methods: {
    changeFlag(){
      this.flag=!this.flag
    },
    show(){
      console.log(6666666);
    },
    getSonData(data){
      console.log('父组件'+data);
    }
  },// 方法集合
  beforeCreate () { }, // 生命周期 - 创建之前
  created () { }, // 生命周期 - 创建完成（可以访问当前this实例）
  beforeMount () { }, // 生命周期 - 挂载之前
  mounted () { }, // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
  deactivated () { }, // 如果页面有keep-alive缓存功能，当组件被移除时，触发钩子函数deactivated
}
</script>
<style>
.span1{
  width: 200px;
  height: 100px;
  border:solid 1px red;
}
</style>